<template>
	<div>
		<div
			style="margin: 20px 15px; background-color: #ffffff;border: 1px solid #f3f3f3;margin-top: 20px;box-shadow: azure;">
			<div class="cont">
				<span class="name">姓 名</span>
				<span class="num">牛韦</span>
			</div>
			<div class="cont1">
				<span class="name">住院号</span>
				<span class="num">390090</span>
			</div>
		</div>
		<div class="pay">
			<div>住院余额</div>
			<div>¥3600.00</div>
		</div>
		<div class="timezou">
			<div class="lasttime">近一年</div>
			<div class="choosetime">选择时间
				<img src="@/static/bottom.png"
					style="width: 20px;height: 20px;vertical-align: middle;margin-left: 3px;">
			</div>
		</div>
		<div @click="detail">
			<div class="flex">
				<div class="mon">
					<div>住院预交金</div>
					<div class="nub">2020年10月5日 10:44</div>
				</div>
				<div>
					<div class="numb">+6000.00</div>
					<div class="nub">余额6500.00</div>
				</div>
			</div>
			<div class="flex1">
				<div class="mon">
					<div>住院预交金</div>
					<div class="nub">2020年10月5日 10:44</div>
				</div>
				<div>
					<div class="numb">+6000.00</div>
					<div class="nub">余额6500.00</div>
				</div>
			</div>
			<div class="flex1">
				<div class="mon">
					<div>住院预交金</div>
					<div class="nub">2020年10月5日 10:44</div>
				</div>
				<div>
					<div class="numb">+6000.00</div>
					<div class="nub">余额6500.00</div>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			detail() {
				uni.navigateTo({
					url: "../../../hospitalizationServices/pages/charge/detail"
				})
			}
		}
	}
</script>

<style>
	.nub {
		font-size: 10px;
		margin-top: 10px;
		color: #AAAAAA;
	}

	.numb {
		color: orange;
	}

	.mon {
		font-size: 16px;
	}

	.flex {
		display: flex;
		padding: 10px 0;
		align-items: center;
		justify-content: space-between;
		margin: 0 15px;
		border-top: 1px solid rgba(242, 242, 242, 1);
		border-bottom: 1px solid rgba(242, 242, 242, 1);
		font-size: 14px;
	}

	.flex1 {
		display: flex;
		padding: 10px 0;
		align-items: center;
		justify-content: space-between;
		margin: 0 15px;

		border-bottom: 1px solid rgba(242, 242, 242, 1);
		font-size: 14px;
	}

	.choosetime {
		padding: 5px 10px;
		font-family: 'PingFangSC-Thin', 'PingFang SC Thin', 'PingFang SC', sans-serif;
		font-weight: 200;
		font-style: normal;
		font-size: 14px;
		letter-spacing: 1px;
		color: #4998ff;
		background-color: #e4f0ff;
		border-radius: 15px;
		margin-left: 15px;

	}

	.lasttime {
		padding: 5px 15px;
		font-family: 'PingFangSC-Thin', 'PingFang SC Thin', 'PingFang SC', sans-serif;
		font-weight: 200;
		font-style: normal;
		font-size: 14px;
		letter-spacing: 1px;
		color: #f5f9ff;
		background-color: #006eff;
		border-radius: 15px;

	}

	.timezou {
		display: flex;
		margin: 15px 10px;
	}

	.pay {
		margin: 20px 15px;
		background-color: #ffffff;
		border: 1px solid #f3f3f3;
		box-shadow: azure;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 5px;
		font-size: 14px;
		color: #555555;
	}

	.num {
		margin-left: 10px;
		color: #000;
	}

	.name {
		margin-left: 5px;
		color: #AAAAAA;
	}

	.cont {
		padding: 10px 5px;
		font-size: 14px;
		border-bottom: 1px solid #f5f5f5;
		color: #555555;
	}

	.cont1 {
		padding: 10px 5px;
		font-size: 14px;
		color: #555555;
	}
</style>